<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/style.css"/>
    <script type="text/javascript" src="__STATIC__/index/js/rem.js"></script>
    <title>申请售后</title>
</head>
<body>
<div class="write">
    <!--填写售后表单-->
    <div class="write_form">

        <div class="write_list clear">
            <span>物流公司</span>
            <img class="arrow" src="__STATIC__/index/img/arrow-gery.png"/>
            <p class="fr val" data-value="">请选择物流公司</p>
        </div>
        <div class="write_list">
            <span>物流单号</span>
            <input type="text" name="wuliu_num" placeholder="请填写物流单号"/>
        </div>

        <div class="write_list">
            <span>联系电话</span>
            <input id="phone" type="tel" name="phone" value="" placeholder="请填写联系电话" maxlength="11"/>
        </div>

        <div class="write_list">
            <span>退款说明</span>
            <input type="text" name="content" placeholder="选填"/>
        </div>

    </div>

    <!--上传凭证-->
    <div class="write_upload">
        <form class="license_form">
            <p class="smoth super-text bold">上传相关图片</p>
            <div class="result" id="result">
                <div class="default_img">
                    <img class="auto-img hoverImg" src="__STATIC__/index/img/licenese.png"/>
                    <input class="topPhoto" type="hidden" name="licence" id="topPhoto"/>
                </div>
            </div>
        </form>
        <!--提交-->
        <button class="submit post_submit">提交</button>
    </div>
</div>
<!--下拉选择框-->
<div class="select_box">
    <ul class="select">
        {foreach $kuaidi as $v}
        <li data-value="{$v.express_code}">{$v.express_title}</li>
        {/foreach}
    </ul>
</div>
<script type="text/javascript" src="__STATIC__/index/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/layer/mobile/layer.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript">
    //弹出下拉框
    $('.val').on('click', function () {
        $('.select_box').toggleClass('block')
        $('.select_box .select').css({'top': '2.55rem'})
    })
    //弹出选择框时禁止滑动
    $('.select_box').on('touchmove', function (e) {

    })
    //点击下拉框的值
    $('.select li').on('click', function () {
        $(this).addClass('on').siblings().removeClass('on');
        var val = $(this).text();
        var num = $(this).data('value');
        //获取选择的下拉框的值
        $('.val').html(val);
        $('.val').data('value',num);
        //改变p标签内的值
        $('.val').css({'font-size': '0.3rem', 'color': '#2e2e2e'})
        //改变样式
        $('.select_box').removeClass('block')
    })

    //定义上传图片张数
    var imgcount = 0;
    // JSSDK 配置参数
    wx.config({$jsSign | raw});
    // JSSDK 初始化成功
    wx.ready(function () {
        $('.default_img').click(function () {
            var localIds = [];
            wx.chooseImage({
                count: (3 - imgcount), // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    localIds = res.localIds;
                    syncUpload();
                }
            });

            function syncUpload() {
                if (!localIds.length) {
                    // alert('上传成功!');
                } else {
                    var localId = localIds.shift();
                    wx.uploadImage({
                        localId: localId,
                        success: function (res) {
                            // alert(localId);
                            $('.default_img').before('<div class="remove_img" id="remove_img"><i class="close"></i><img class="auto-img" togy="' + res.serverId + '" src="' + localId + '" /></div>');
                            imgcount++;
                            if (imgcount > 2) {
                                $('.default_img').hide();
                            }
                            syncUpload();
                        }
                    });
                }
            }
        });
    });

    $('.result').on('click', '.close', function () {
        $(this).parents('.remove_img').remove();
        imgcount--;
        if (imgcount < 3) {
            $('.default_img').css({'display': 'inline-block'});
        }
    });

    //点击提交按钮
    $('.submit').on('click', function () {
        var thumb = '';
        $('.remove_img').each(function () {
            thumb+='|'+$(this).children('img').attr('togy');
        });
        var wuliu_num = $('input[name="wuliu_num"]').val();
        if ($('.val').text() == '请选择物流公司') {
            layer.open({
                content: '请选择物流公司',
                skin: 'msg',
                time: 2
            })
        } else if (wuliu_num == '') {
            layer.open({
                content: '请填写物流单号',
                skin: 'msg',
                time: 2
            })
        } else if ($('#phone').val() == '') {
            layer.open({
                content: '请填写联系电话',
                skin: 'msg',
                time: 2
            })
        } else if (thumb == '') {
            layer.open({
                content: '请上传图片',
                skin: 'msg',
                time: 2
            })
        } else {
            $.ajax({
                url:"",
                type:"post",
                data:{id:'{$order.id}',wuliu_num:wuliu_num,express_code:$('.val').data('value'),reason:$('.val').text(),content:$('input[name="content"]').val(),phone:$('#phone').val(),thumb:thumb.substr(1)},
                success:function (res) {
                    if(res.code=='ok'){
                        layer.open({
                            content: '提交成功',
                            skin: 'msg',
                            time: 2,
                            end:function () {
                                window.location.replace('post_success');
                            }
                        })
                    }else {
                        layer.open({
                            content: res.msg,
                            skin: 'msg',
                            time: 2
                        })
                    }

                }
            })
        }
    })

</script>
</body>
</html>